/**引入混合函数**/
@import "mixins.less";
.h(@heigiht){
    height: @heigiht/200rem;
}
*{
    margin: 0;
    padding: 0;
}
.clear::after{
    content: '';
    display: block;
    clear: both;
}
#travelDetail{
    header{
        height:50px;
        width: 100%;
        background:rgba(0,0,0,0.4);  
        position: fixed;
        top: 0;
        left: 0; 
        z-index: 99;
        font-size: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.3rem;
       .header-return{
           background: url(../images/icon/sprites.png)no-repeat -0.48rem -0.13rem;
           background-size: 3.75rem 4.75rem;
           height: 0.25rem;
           width: 0.25rem;
        }
        p{
            color: #fff;
        }
        .header-right{
            display: flex;
            .header-sharing{
                background: url(../images/icon/sprites.png)no-repeat -2.26rem -3.11rem;
               background-size: 3.75rem 4.75rem;
               height: 0.25rem;
               width: 0.25rem;
               margin-right: 0.1rem;
            }
            .header-more{
                display: flex;
                padding-top: 0.1rem;
                a{
                    height: 0.05rem;
                    width: 0.05rem;
                    background: #fff;
                    margin: 0 0.01rem;
                    border-radius: 50%
                }
            }
        }
    }
    .container{
        .max-width();
        position: relative;
        .img-box{
            width: 100%;
            img{
                width: 100%;
                display: block;
            }
        }
        .travel-number{
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 55;
            height:0.2rem;
            background: rgba(0,0,0,0.4);
            font-size:0.12rem ;
            .go{
                margin-top: 0.02rem;
                span{
                    color: white;
                    margin: 0 0.05rem 0 0.1rem;
                }
                .num{
                    float:right;
                    margin-right: 0.09rem;
                }
            }
            
        }
    }
    section{
        padding-bottom: 0.5rem;
        .max-width();
        font-size: 0.16rem;
        div{
            margin-top: 0.06rem;
        }
        .travel-box{
            margin: 0.13rem 0.13rem 0.13rem 0.13rem;
            .travel-title{
                a{
                    color: black;
                }
            }
            .travel-diamond{
                height: 0.15rem;
                width: 0.85rem;
                background: url(../images/icon/sprites.png) no-repeat -0.19rem -2.12rem;
                background-size: 3.75rem 4.75rem;
                
            }
            .travel-price{
                display: flex;
                margin: 0 0.15rem;
                justify-content: space-between;
                span{
                    font-size: 0.18rem;
                    color: #FF4401;
                    position: relative;
                    &::before{
                        content: '￥';
                        display: block;
                        height: 0.1rem;
                        width:0.1rem;
                        position: absolute;
                        top: 0;
                        left: -0.1rem;
                        font-size: 0.08rem;
                        color: #FF4401;
                    }
                    &::after{
                        content: '/人起';
                        display: block;
                        height: 0.1rem;
                        width:0.3rem;
                        position: absolute;
                        bottom: 0.06rem;
                        left:0.44rem;
                        font-size: 0.08rem;
                        color: #999;
                    }
                }
                .price-a{
                    font-size: 0.12rem;
                    a{
                        padding: 0.02rem 0.02rem;
                        border: 1px solid #c5c5c5;
                        color: #999999;
                        margin-left: 0.05rem;
                        background-color: #eeeeee;
                    }
                }
            }
        }
        .travel-list{
            padding: 0.08rem 0;
            background-color: #fdeacc;
            color: #666666;
            font-size: 0.12rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .travel-list-img{
                a{
                    padding: 0.01rem;
                    border-radius: 0.02rem;
                    display: block;
                    margin: 0.09rem;
                    &:nth-child(1){
                        color: #EF4242;
                        border: 1px solid #EF4242;
                    }
                    &:nth-child(2){
                        color: #fff;
                        background-color:#EF4242 ;
                    }
                }
            }
            .travel-list-info{
                p{
                    padding-left: 0.02rem;
                    &:nth-child(2n){
                        margin-bottom: 0.05rem;
                    }

                }
            }
            .travel-list-more{
                font-size: 0.25rem;
            }
        }
        .evaluate{
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            .travel-evaluate{
                border-bottom: 1px solid #ccc;
                margin: 0.1rem;
                .evaluate-people{
                    display: flex;
                    align-items: baseline;
                    p{
                        color: #666666;
                        margin-right: 0.1rem;
                        span{
                            color: #FF4401;
                        }
                        &:nth-child(3){
                            font-size: 0.12rem;
                        }
                    } 
                }
                .evaluate-socre{
                    display: flex;
                    flex-wrap: wrap;
                    a{
                        background: #eeeeee;
                        font-size: 0.12rem;
                        color: #999;
                        padding: 0.02rem;
                        margin:0.02rem 0.15rem 0.08rem 0;
                    }
                }
            }
            .look-evaluate{
                margin: 0.1rem;
                font-size: 0.13rem;
                color: #666666;
                .name{
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 0.04rem;
                }
                .btn{
                    display: flex;
                    justify-content: center;
                    margin-top: 0.05rem;
                    button{
                        border: 1px solid #1AB2DB;
                        background: none;
                        border-radius: 0.05rem;
                        padding: 0.03rem 0.2rem;
                        a{
                            color: #1AB2DB;
                        }
                    }
                }
            }
        }
        .travel-tab{
            ul{
                display: flex;
                justify-content: space-between;
                li{
                   text-align: center; 
                   width: 33%;
                   padding: 0.1rem 0;
                   a{
                       color: #000;
                       font-size: 0.14rem;
                   }
                }
                li.unfold{
                    border-bottom: 0.03rem solid #F7C612;
                    a{
                        color: #1AB2DB;
                    }    
                }
            }
            .tab-img{
                display: none;
                img{  
                    width: 100%;
                    display: block;
                }
            }
            .tab-route{
                padding-top: 0.1rem;
                display: none;
                .route-info{
                    font-size: 0.14rem;
                    border-left: 1px dashed #999;
                    margin: 0 0.3rem 0 0.5rem;
                    padding:0 0.1rem;
                    .route-info1{
                        margin-bottom: 0.1rem;
                        p{
                            margin-bottom: 0.1rem;
                            position: relative;
                            &::before{
                                content: '';
                                display: block;
                                height: 0.07rem;
                                width: 0.07rem;
                                border-radius: 50%;
                                background-color: #000;
                                position: absolute;
                                top: 0.06rem;
                                left: -0.14rem;
                            }
                        }
                        .info-img{
                            display: flex;
                            flex-wrap: wrap;
                            img{
                                width: 48%;
                                border: 1px solid #ccc;
                                margin: 0.02rem;
                            }
                        }
                    }
                }
            }
            .tab-konw{
                margin:0.08rem 0.25rem 0 0.5rem;
                font-size: 0.13rem;
                display: none;
                h3{
                    color: #1ab2db;
                }
            }
            .unfold{
                display: block;
            }
        }
    }
    footer{
        background: #ededed;
        height: 50px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        ul{
            width: 60%;
            display: flex;
            li{
                width: 33.333%;
                border-right: 1px solid #c5c5c5;
                a.images{
                    background: url(../images/icon/sprites.png)no-repeat -285px -188px;
                    background-size: 475px 575px;
                    height: 50px;
                    margin: 0 auto;
                    width:50px;
                    display: block;
                }
                &:nth-child(2){
                    a.images{
                        background-position:-337px -188px;
                    }
                }
                &:nth-child(3){
                    a.images{
                        background-position:-385px -188px;
                    }
                }
            }
        }
        .star{
            width: 40%;
            text-align: center;
            line-height: 50px;
            background-color: orange;
            height:50px;
            font-size: 18px;
            color: #fff;
        }
    }
}